<template>
    <div class="screenMobileA" :style="svgBG1">
      <mapCounter></mapCounter>
      <div class="area-wrap">
        <div v-if="area.name!='bottom'" :class="`area-box area-${area.name}`" v-for="area in areas">
          <div class="portlet-wrapper"  v-for="(item,index) in area.portlets">
            <component v-if="item.border" :is='item.border' :config="getConfig(item)">
              <!-- <portletTitle v-if="!item.hideTitle" :title="item.title"></portletTitle> -->
              <blockTitleA1 v-if="!item.hideTitle" :config="blockTitleConfig" >{{item.title}}</blockTitleA1>
              <component :is='item.component' ></component>
              <i>{{item.component}}</i>
            </component>
            <template v-else>
              <component :is='item.component'></component>
              <i>{{item.component}}</i>
            </template>
          </div>
      </div>

      <div :class="`area-box area-bottom`">
          <div class="content-tabs">
            <div class="tabs-item" :class="item.label==tabActive?'active':'deactive'" @click="tabActive=index" v-for="(item,index) in tabs">{{item.title}}</div>
          </div>
          <div class="portlet-wrapper" v-for="(item,index) in areas[1].portlets">
            <component :is='item.border' :config="getConfig(item)">
              <template v-if="!item.charts">
                <blockTitleA1 v-if="!item.hideTitle" :config="blockTitleConfig" >{{item.title}}</blockTitleA1>
                <!-- <portletTitle v-if="!item.hideTitle" :title="item.title"></portletTitle> -->
                <component :is='item.component' :tabActive="tabActive" ></component>
                <i>{{item.activeIn==tabActive }}-{{item.activeIn }}-{{item.component}}</i>
              </template>
              <template v-else>
                
                <template v-for="chart in item.charts" v-if="chart.activeIn==tabActive">
                  <blockTitleA1 v-if="!item.hideTitle" :config="blockTitleConfig" >{{chart.title}}</blockTitleA1>
                  <!-- <portletTitle :title="chart.title"></portletTitle> -->
                  <component :is='chart.component' :tabActive="tabActive" ></component>
                  <i>{{chart.activeIn==tabActive }}-{{chart.activeIn }}-{{chart.component}}</i>
                </template>
              
              </template>
            </component>
          </div>
        </div>
      </div>
      
      <sysTitleA1></sysTitleA1>
      <!-- <mapDrill v-if="chartInitCounter>=8"></mapDrill> -->
    </div>
</template>
<script>

export default {
  mixins: [],
  components: {
    mapCounter:() => import('./portlet/map/map-counter'),
    mapDrill:() => import('./portlet/map/map-simple'),
    echartsBarA:() => import('./portlet/echarts-BarA'),
    echartsBarHoriz:() => import('./portlet/echarts-BarHoriz'),
    echartsLineA:() => import('./portlet/echarts-lineA'),
    counterGrid:() => import('./portlet/counter-grid'),
    echartsBarLineTabs:() => import('./portlet/echarts-barLineTabs'),
    echartsLineB:() => import('./portlet/echarts-lineB'),
    echartsLineC:() => import('./portlet/echarts-lineC'),
    echartsPieTabs:() => import('./portlet/echarts-pieTabs'),
    echartsBarLineA:() => import('./portlet/echarts-BarLineA'),
    scrollBoardTable:() => import('./portlet/scrollBoard-Table'),
    rankingBoard:() => import('./portlet/rankingBoardScroll'),
    echartsLineD:() => import('./portlet/echarts-lineD'),
    echartsBarB:() => import('./portlet/echarts-BarB'),

    //mapDrill:() => import('../portlet/mapLN'),
  },
  data() {
    return {
      blockTitleConfig:{width:180,},
      tabActive:0,
      tabs:[
        {title:"海侵区",label:0},
        {title:"保护区A",label:1},
        {title:"保护区B",label:2},
      ],
      
      areas:[
        {name:"top",portlets:[
          {title:"地图",component:"mapDrill",border:"aYinTechBorderB4",hideTitle:true},
          {title:"超采区关系",component:"echartsBarA",border:"aYinTechBorderB4"},
          {title:"超采区水位 / 用水量",component:"echartsBarHoriz",border:"aYinTechBorderB4"},
          {title:"超采区行政区用水情况",component:"echartsLineA",border:"aYinTechBorderB4"},
          {title:"计数器",component:"counterGrid",border:false},
          {title:"柱状图选项卡",component:"echartsBarLineTabs",border:"aYinTechBorderB4",hideTitle:true},
          {title:"地下水总体趋势",component:"echartsLineB",border:"aYinTechBorderB4"},
        ]},
        {name:"bottom",portlets:[
          {title:"饼图选项卡",component:"echartsPieTabs",border:"aYinTechBorderB4",hideTitle:true},

          {border:"aYinTechBorderB4",charts:[
            {title:"海侵区面积变化情况",component:"echartsLineC",activeIn:0},
            {title:"区域内监测站水位A",component:"echartsLineD",activeIn:1},
            {title:"区域内监测站水位B",component:"echartsLineD",activeIn:2}
          ]},
          {border:"aYinTechBorderB4",charts:[
            {title:"海侵区情况",component:"echarts-BarLineA",activeIn:0},
            {title:"区域内监测站埋深A",component:"echartsBarB",activeIn:1},
            {title:"区域内监测站埋深B",component:"echartsBarB",activeIn:2}
          ]},
          {border:"aYinTechBorderB4",charts:[
            {title:"企业用水量超标报警",component:"scrollBoardTable",activeIn:0},
            {title:"日用水量排行榜A",component:"rankingBoard",activeIn:1},
            {title:"日用水量排行榜B",component:"rankingBoard",activeIn:2}
          ]},
        ]},
        
      ]
      
    };
  },
  computed: {
    chartInitCounter(){
      return this.$vuex.state.dashboardConfig.chartInitCounter;
    }
  },
  methods: {
   
    getConfig(item){
      const {getColor}=this
      let borderConfig={
        title:item.title,
        // titleColor:$c.cyl5,
        // backgroundColor:$c.bll9,
        // borderColor:$c.bll7,
        // decorationColor:[$c.bll3,$c.cyl5],
        opacity:.6
      }
      return borderConfig;
    }
    
  },
  watch:{
    // "$vuex.state.dashboardConfig.chartInitCounter"(val,old){ cl("SAResizeCounter",val,old) },
  },
  mounted() {
  },
  beforeDestroy(){},
};
</script>

<style lang="less">
.screenMobileA{.poa; .fullbox; z-index: 1; padding:30px 15px;
  background: @bll9 url(../common/images/bg.png) no-repeat  center / 100% 100%;
  .i(){.poa; bottom:0; right:10px; font-size: 12px; opacity: .1; .fc(@wh); z-index: 10;}
  .area-wrap{margin:230px 0 0 0;}
  .area-box{.bdr(5px);  pointer-events: visible; position: relative; z-index: 10; 
    display: grid; grid-template-columns: repeat(1,1fr); grid-template-rows:repeat(4,1fr); grid-gap: 20px;
    //<row-start> / <column-start> / <row-end> / <column-end>;
    .portlet-wrapper{.por; height:250px;
      >i{.i;}
    }
    .border-content{>i{.i;}}
    &.area-top{
      .portlet-wrapper{
        &:nth-child(1){grid-row: 1 / 3;height:auto;}
      }
    }
    &.area-bottom{margin-top:60px; }
  }
  .content-tabs{.poa;  top:-40px; left:80px; right:80px; text-align: center; height: 40px;
    &:before{content:" "; .bdb(var(--button-bd_hov));left:0; right:0; bottom:10px;.poa; z-index: 1;}
    .tabs-item{display:inline-block; padding:0 10px; .ff("cn1");.fc(var(--font-normal)); height: 30px;line-height: 30px; cursor: pointer; .ani; z-index: 2; .por;
      &:before{ .bgc(var(--button-bd_hov));}
      &:hover{.bgc(fade(@cbl3,30%));}
      &.active{.bdb(var(--font-strong)); .fc(var(--font-strong));}
    }
  }
  .sysTitle-wrap{transform: scale(.7) translateX(-50%); transform-origin: left top;}
}

</style>
